<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">


    </div>
</body>

</html>
<script>
    // watch与computed 
    // 结构上看: 
    // compouted 计算属性他是一个属性, 有值的,只就是return 的值, 必须得有return 
    // watch : watcn 不需要return 

    // 执行时间:
    // computed: 初始化就执行, 当依赖的数据发生改变,再次执行
    // watch: 默认初始化不执行, 当设置了immediate 之后,才执行

    // 应用场景:
    // 计算属性一般都适用于轻量级,开销比较小的操作, 
    // watch 一般用于开销比较大的值, 如 数据请求异步操作或者其他比较大的异步操作

    // 性能上
    // computed 有缓存
    // watch 没有缓存
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {

        }
    }).mount('#app')

</script>